<script setup>
import { ref } from "vue";
import MaterialButton from "@/components/MaterialButton.vue";

defineProps({
    cardId: {
        type: Number,
    },
    image: {
        type: String,
    },
    title: {
        type: String,
    },
    description: {
        type: String,
    },
    action: {
        type: Object,
        color: String,
        route: String,
        label: String,
        default: () => ({
            color: "bg-gradient-success",
            label: "Find Out More",
        }),
    },
});
let valueId = ref();
// const preview = (value) => {
//   console.log("value", value);
// };
// const download = (value) => {
//   console.log("download", value);
// };
const emit = defineEmits(["dosth"]);
const preview = (value) => {
    //子组件用emit向父组件触发一个事件
    emit("preview", value);
};
const download = (value) => {
    //子组件用emit向父组件触发一个事件
    emit("download", value);
};
</script>
<template>
    <div class="card move-on-hover-s">
        <div class="card-body text-center">
            <h5 class="font-weight-bold">
                <a href="javascript:;" class="text-red ignore">{{ title }}</a>
            </h5>

            <div class="text-center">
                <img class="img-fluid border-radius-lg tire" style="width: 80%" :src="image ? image.split(',')[0] : ''" :alt="title" />
            </div>
            <slot />
        </div>
    </div>
</template>
<style scoped>
.card {
    box-shadow: 0 0 10px #c5c2c2;
}

.btn {
    padding: 0.25rem 0.5rem;
}
@media (max-width: 991.98px) {
    h5,
    .h5 {
        font-size: 0.9rem;
    }
    .card .card-body {
        padding: 0.8rem;
    }
}
</style>
